<!-- 收货人管理 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收货人</title>
    <title>书瞳</title>
    <link rel="icon" href="__ROOT__/public/lcbook.ico" type="image/x-icon">
    <link rel="stylesheet" href="__ROOT__/public/static/css/common.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/header.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/popBox.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/consignee.css">
    <!-- fontawesome字体 -->
    <link rel="stylesheet" href="__ROOT__/public/static/font/font-awesome.min.css">
</head>

<body>
    <!-- 头部 -->
    {include file="./public/common/header.html"/}

    <!-- 收货人 -->
    <div id="consignee">
        <!-- 收货人信息 -->
        {if condition="$Customers neq '' "}
        {foreach $Customers as $Customer}
        {if condition="$Customer.cdefault eq '1' "}
        <!-- 默认收货人 -->
        <div class="consigneeBox" id="{$Customer.custID}" data-name="{$Customer.sname}" data-phone="{$Customer.mobile}"
            data-address="{$Customer.address}">
            <p>
                <span>收货人：</span>
                <span>{$Customer.sname}</span>
                <span style="display:none;">{$Customer.custID}</span>
                <span class="default">默认</span>
                <!-- <span><i class="fa fa-trash-o" aria-hidden="true"></i></span> -->
            </p>
            <p>
                <span>收货地址：</span>
                <span>{$Customer.address}</span>
                <span class="do"><a href="#" onclick="editPlane('{$Customer.custID}')">编辑</a></span>
            </p>
            <p>
                <span>联系电话：</span>
                <span>{$Customer.mobile}</span>
            </p>
        </div>
        {else}
        <!-- 其他收货人 -->
        <div class="consigneeBox" id="{$Customer.custID}" data-name="{$Customer.sname}" data-phone="{$Customer.mobile}"
            data-address="{$Customer.address}">
            <p>
                <span>收货人：</span>
                <span>{$Customer.sname}</span>
                <span style="display:none;">{$Customer.custID}</span>
                <span class="do"><a data-custid="{$Customer.custID}" href="#" class="trash"><i class="fa fa-trash-o"
                            aria-hidden="true"></i></a></span>

            </p>
            <p>
                <span>收货地址：</span>
                <span>{$Customer.address}</span>
                <span class="do">
                    <a href="{:url('consignee/setDefault')}?custID={$Customer.custID}" class="do2">设为默认</a>
                    <a href="#" onclick="editPlane('{$Customer.custID}')">编辑</a>
                </span>
            </p>
            <p>
                <span>联系电话：</span>
                <span>{$Customer.mobile}</span>
            </p>
        </div>
        {/if}
        {/foreach}
        {/if}
        <!-- 新增收货人 -->
        <div class="addBox">
            + 新建收货地址
        </div>
    </div>

    <!-- 新增收货人弹出框 -->
    <!-- <form method="post" action ="{:url('consignee/addCustomer')}"> -->
    <div id="info1" class="popBox" style="display: none;">
        <div class="popTitle">
            <span>修改收货地址</span>
            <span><a href="#" class="dropPop">×</a></span>
        </div>
        <div class="popContent">
            <div class="popItem">
                <span>收货人</span>
                <div>
                    <input id="addName" type="text" name="addName" />
                </div>
            </div>
            <div class="popItem">
                <span>手机号码</span>
                <div>
                    <input id="addPhone" type="text" name="addPhone">
                </div>
            </div>
            <div class="popItem">
                <span>省份</span>
                <div>
                    <input id="addProvince" type="text" name="addProvince" value="广东">
                </div>
            </div>
            <div class="popItem">
                <span>城市</span>
                <div>
                    <input id="addCity" type="text" name="addCity" value="佛山">
                </div>
            </div>
            <div class="popItem detailAddress">
                <span>详细地址</span>
                <div>
                    <input id="addAddr" type="text" name="addAddr" value="南海区狮山镇华南师范大学">
                </div>
            </div>
        </div>
        <div class="popBtn">
            <button class="ok" id="infook" type="submit">确认收货地址</button>
            <button class="cancel dropPop">取消</button>
        </div>
    </div>
    <!-- </form> -->

    <!-- 编辑弹出框 -->
    <div id="info2" class="popBox" style="display: none;">
        <div class="popTitle">
            <span>修改收货地址</span>
            <span><a href="#" class="dropPop">×</a></span>
        </div>
        <div class="popContent">
            <div class="popItem">
                <span>收货人</span>
                <div>
                    <input id="editName" type="text" name="editName" />
                </div>
            </div>
            <div class="popItem">
                <span>手机号码</span>
                <div>
                    <input id="editPhone" type="text" name="editPhone">
                </div>
            </div>
            <!-- <div class="popItem">
                <span>省份</span>
                <div>
                    <input id="editProvince" type="text" name="editProvince" value="广东">
                </div>
            </div>
            <div class="popItem">
                <span>城市</span>
                <div>
                    <input id="editCity" type="text" name="editCity" value="佛山">
                </div>
            </div> -->
            <div class="popItem detailAddress">
                <span>详细地址</span>
                <div>
                    <input id="editAddr" type="text" name="editAddr" value="南海区狮山镇华南师范大学">
                </div>
            </div>
        </div>
        <div class="popBtn">
            <button class="ok" onclick="edit();">确认收货地址</button>
            <button class="cancel dropPop">取消</button>
        </div>
    </div>


    <!-- js代码 -->
    <script src="__ROOT__/public/static/js/jquery-1.8.3.min.js"></script>
    <script src="__ROOT__/public/static/js/header.js"></script>
    <script>
        var custID = "";
        $(function () {
            // 设置收货人

            /*
            设为默认按钮被点
            **/
            $('.do2').click(function () {
                // alert("确认设置为默认");
            });

            /*
            新增收货人按钮被点
            **/
            $('.addBox').click(function () {
                //滚动到正确位置
                scroll();
                $('.outsideLayer').show();
                $('#info1').show();
            });


            /*
            删除按钮被点
            **/
            $('.trash').click(function () {
                let custid = $(this).data("custid");
                if (confirm("您确认要删除吗？")) {
                    window.location.href = `__ROOT__/index/consignee/deleteCustomer?custID=${custid}`;
                }
            });

            /*
            新增收货人确认按钮被点
            */
            $('#infook').click(function () {
                var name = $("#addName").val();
                var phone = $("#addPhone").val();
                var province = $("#addProvince").val();
                var city = $("#addCity").val();
                var addr = $("#addAddr").val();
                if (name == "" || phone == "" || province == "" || city == "" || addr == "") {
                    alert("不能留空哦！");
                    return;
                }

                window.location.href = `__ROOT__/index/consignee/addCustomer?addName=${name}&addPhone=${phone}&addProvince=${province}&addCity=${city}&addAddr=${addr}`;

            });

            $('.dropPop').click(function () {
                scrollCancel();
            });
        });

        //显示编辑面板
        function editPlane(custid) {
            // scroll();
            $('body').css('overflow', 'hidden');
            $('.outsideLayer').show();
            $('#info2').show();
            custID = custid;
            let editName = $('#' + custID).data('name');
            let editPhone = $('#' + custID).data('phone');
            let editAddr = $('#' + custID).data('address');
            $("#editName").val(editName);
            $("#editPhone").val(editPhone);
            $("#editAddr").val(editAddr);
        }

        function edit() {
            var editName = $("#editName").val();
            var editPhone = $("#editPhone").val();
            var address = $("#editAddr").val();

            $.post("{:url('consignee/editCustomer')}", {
                custID: custID,
                editName: editName,
                editPhone: editPhone,
                address: address
            }, function (res) {
                if (res == "ok") {
                    window.location.href = "__ROOT__/index/consignee/consignee";
                } else {
                    alert("数据库错误，修改失败");
                }
            });
        }

        function scroll() {
            let val = $(window).scrollTop();
            // console.log(val);
            $('.outsideLayer').css("margin-top", val+'px');
            $('#info2').css("top", 100 + val + "px");
            $('#info1').css("top", 100 + val + "px");

            $('body').css('overflow', 'hidden');
        }

        function scrollCancel() {
            $('.outsideLayer').css("margin-top", 0);
            $('#info2').css("top", 100 +  "px");
            $('#info1').css("top", 100 +  "px");
            $('body').css('overflow', 'scroll');
        }
    </script>

</body>

</html>